@(id: String,onlyPanel:Boolean)(implicit request: RequestHeader)
	@main("样品详情")("resultView") {

		<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/plugins.min.css")">

		<script src="@routes.Assets.at("easy-pie-chart-2.1.6/dist/jquery.easypiechart.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("javascripts/App.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("javascripts/plugins.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("javascripts/my-quick-nav.js")" type="text/javascript"></script>
		@* <script src="@routes.Assets.at("javascripts/quick-siderbar.js")" type="text/javascript"></script>*@
		<style>
				.genome-pre {
					white-space: pre-wrap;
					word-wrap: break-word;
					border: 0px solid #ccc;
					background-color: white;
				}

				.mySelected {
					background-color: #c0edf1
				}

				.myTab {
					cursor: pointer;
				}

				.strTable > thead > tr > th, .strTable > tbody > tr > th, .strTable > tfoot > tr > th,
				.strTable > thead > tr > td, .strTable > tbody > tr > td, .strTable > tfoot > tr > td {
					vertical-align: middle;
					text-align: center;
				}

				.myA {
					color: #ffffff;
				}

				.myTr:hover .myA {
					color: #c0edf1;
				}

				.myA:hover {
					color: #c0edf1;
				}

				.myTd:hover {
					color: black;
				}

				.nav-is-visible {
					background-color: #364150;
					border-radius: 6px ;
				}

				#myNav ul li:hover {
					background-color: #36C6D3;
				}

		</style>


		<div class="page-content">

			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa fa-group"></i>
						<a href="@routes.SampleController.sampleManageBefore()">样品管理</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<span >样品详情</span>
					</li>
				</ul>
			</div>

			<div class="row">

				<div class="row-fluid col-sm-12" id="sampleInfo" >
					<div class="row">
						<div class="col-md-12 col-sm-12">
							<div class="portlet blue-dark box">
								<div class="portlet-title">
									<div class="caption" style="cursor: pointer;
										width: 98%" onclick="Tool.expand(this)">
										样品信息
									</div>
									<div class="tools">
										<a class="collapse" id="removeClick" disabled="true"></a>
									</div>
								</div>

								<div class="portlet-body" style="">
									<div class="table-responsive">

										<form class="form-horizontal" role="form" id="sample">
											<div class="form-body">

												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="control-label col-md-2">样品编号:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="id">  </p>
															</div>
															<label class="control-label col-md-2">panel:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="panel">  </p>
															</div>
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="control-label col-md-2">index号:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="indexId">  </p>
															</div>
															<label class="control-label col-md-2">项目:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="sampleIntro">  </p>
															</div>
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="control-label col-md-2">性别:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="gender">  </p>
															</div>
															<label class="control-label col-md-2">推断性别:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="inferGender">  </p>
															</div>
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="control-label col-md-2">类型:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="kind">  </p>
															</div>
															<label class="control-label col-md-2">备注:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="comment">  </p>
															</div>
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="control-label col-md-2">分析名称:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="updateMission">  </p>
															</div>
															<label class="control-label col-md-2">更新时间:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="updateTime">  </p>
															</div>
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="control-label col-md-2">导出报告:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="export">  </p>
															</div>
														</div>
													</div>
												</div>

												<h4>基本信息</h4>

												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="control-label col-md-2">Interlocus Balance:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="Interlocus Balance">  </p>
															</div>
															<label class="control-label col-md-2">Single Source:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="Single Source">  </p>
															</div>
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="control-label col-md-2">iSNP Loci Typed:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="iSNP Loci Typed">  </p>
															</div>
															<label class="control-label col-md-2">
																Autosomal Loci Typed:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="Autosomal Loci Typed">  </p>
															</div>
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="control-label col-md-2">X Loci Typed:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="X Loci Typed">  </p>
															</div>
															<label class="control-label col-md-2">Y Loci Typed:</label>
															<div class="col-md-4">
																<p class="form-control-static" id="Y Loci Typed">  </p>
															</div>
														</div>
													</div>
												</div>

											</div>
										</form>

									</div>
								</div>
							</div>
						</div>
					</div>

					<div id="sampleDetail">

						<div id="result" style="display: block" >

							<div class="row" id="myBasicInfo">
								<div class="col-md-12 col-sm-12" >

									<h4>Autosomal STRs</h4>

									<div class="tab-pane fade in active" id="autoStr">

										<div class="portlet blue-dark box" id="autoMyDepthInfo">
											<div class="portlet-title">
												<div class="caption" style="cursor: pointer;
													width: 98%" style="cursor: pointer;
													width: 98%" onclick="Tool.expand(this)">
													Autosomal STRs位点深度信息(<span id="id" class="id"></span>)
												</div>
												<div class="tools">
													<a class="collapse" id="removeClick" disabled="true"></a>
												</div>
											</div>
											<div class="portlet-body" id="noCotent" style="display: block">
												<div class="tab-pane active " id="tab_1">

													<div class="table-responsive" id="tableContent">
														<table class="display table table-bordered detailTable" id="dataTable"

														>
															<thead>
															</thead>
														</table>

													</div>

												</div>
											</div>
											<div>
											</div>
										</div>

									</div>

									<h4>Y STRs</h4>

									<div class="tab-pane" id="yStr">

										<div class="portlet blue-dark box" id="yMyDepthInfo">
											<div class="portlet-title">
												<div class="caption" style="cursor: pointer;
													width: 98%" onclick="Tool.expand(this)">
													Y STRs位点深度信息(<span id="id" class="id"></span>)
												</div>
												<div class="tools">
													<a class="collapse" id="removeClick" disabled="true"></a>
												</div>

											</div>

											<div class="portlet-body" id="noCotent" style="display: block">

												<div class="tab-pane active " id="tab_1">

													<div class="table-responsive" id="tableContent">
														<table class="display table table-bordered detailTable" id="dataTable"

														>
															<thead>
															</thead>
														</table>

													</div>

												</div>

											</div>

											<div>

											</div>
										</div>

									</div>

									<h4>X STRs</h4>

									<div class="tab-pane" id="xStr">

										<div class="portlet blue-dark box" id="xMyDepthInfo">
											<div class="portlet-title">
												<div class="caption" style="cursor: pointer;
													width: 98%" onclick="Tool.expand(this)">
													X STRs位点深度信息(<span id="id" class="id"></span>)
												</div>
												<div class="tools">
													<a class="collapse" id="removeClick" disabled="true"></a>
												</div>

											</div>

											<div class="portlet-body" id="noCotent" style="display: block">

												<div class="tab-pane active " id="tab_1">

													<div class="table-responsive" id="tableContent">
														<table class="display table table-bordered detailTable" id="dataTable"

														>
															<thead>
															</thead>
														</table>

													</div>

												</div>

											</div>

											<div>

											</div>
										</div>

									</div>

									<h4>iSNPs</h4>

									<div class="tab-pane" id="snp">

										<div class="portlet blue-dark box" id="snpMyDepthInfo">
											<div class="portlet-title">
												<div class="caption" style="cursor: pointer;
													width: 98%" onclick="Tool.expand(this)">
													iSNPs位点深度信息(<span id="id" class="id"></span>)
												</div>
												<div class="tools">
													<a class="collapse" id="removeClick" disabled="true"></a>
												</div>

											</div>

											<div class="portlet-body" id="noCotent" style="display: block">

												<div class="tab-pane active active in" id="tab_1">

													<div class="table-responsive" id="tableContent">
														<table class="display table table-bordered detailTable" id="dataTable"

														>
															<thead>
															</thead>
														</table>

													</div>

												</div>

											</div>

											<div>

											</div>
										</div>

									</div>

								</div>
							</div>
						</div>

						<div id="locusModal" class="modal fade myModal">
							<div class="modal-dialog" style="width: 800px">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" data-dismiss="modal" aria-hidden="true" class="close">
													&times;</button>
										<h4 class="modal-title">
											<span id="number" class="locus"></span>(<span id="number" class="id"></span>
											)</h4>
									</div>
									<div class="modal-body">

										<div class="table-responsive" id="tableContent">
											<table class="display table table-bordered detailTable" id="detailTable"

											>
												<thead>
												</thead>
											</table>

										</div>
										<hr>
										<div align="center">
											<div id="strDetailChart" style=""></div>
										</div>

									</div>
									<div class="modal-footer">
										<button type="button" data-dismiss="modal" class="btn btn-default ">关闭</button>
									</div>
								</div>
							</div>
						</div>

						<div id="snpModal" class="modal fade myModal">
							<div class="modal-dialog" style="width: 600px">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" data-dismiss="modal" aria-hidden="true" class="close">
													&times;</button>
										<h4 class="modal-title">
											<span id="number" class="locus"></span>(<span id="number" class="id"></span>
											)</h4>
									</div>
									<div class="modal-body">

										<div class="table-responsive" id="tableContent">
											<table class="display table table-bordered detailTable" id="detailTable" style="word-break: break-all"

											>
												<thead>
												</thead>
											</table>

										</div>
										<hr>
										<div align="center">
											<div id="detailChart" style=""></div>
										</div>

									</div>
									<div class="modal-footer">
										<button type="button" data-dismiss="modal" class="btn btn-default ">关闭</button>
									</div>
								</div>
							</div>
						</div>

					</div>


				</div>

			</div>

		</div>

		<nav class="quick-nav" style=" " id="myNav">
			<a class="quick-nav-trigger" href="#0" style="cursor: pointer;" onclick="SampleSummary.changeHref">
				<span aria-hidden="true" style="cursor: pointer;
					z-index: 99;"></span>
			</a>
			<ul id="myUl">
				<li>
					<a href="#sampleInfo" >
						<span>样品信息</span>
					</a>
				</li>
				<li>
					<a href="#autoMyDepthInfo" >
						<span>Autosomal STRs位点深度信息</span>
					</a>
				</li>
				<li>
					<a href="#yMyDepthInfo" >
						<span>Y STRs位点深度信息</span>
					</a>
				</li>
				<li>
					<a href="#xMyDepthInfo" >
						<span>X STRs位点深度信息</span>
					</a>
				</li>
				<li>
					<a href="#snpMyDepthInfo" >
						<span>iSNPs位点深度信息</span>
					</a>
				</li>
			</ul>
			<span aria-hidden="true" class="quick-nav-bg"></span>
		</nav>


		<script>
				var id = "@id"
				var onlyPanel = "@onlyPanel"

				function test() {
					$("#{gender} {kind}Percent").data("easyPieChart").update(percent)
				}

				$(function () {
					SampleSummary.init
					SampleDetail.init

					QuickNav.init()

				})
		</script>


	}